<template>
    <div>
      <!-- <div class="add-btn">
        <el-button type="primary" size="small" @click="showAddressDialog"><i class="el-icon-plus"></i> 添加新地址</el-button>
      </div> -->
      <div class="search-list">
        <el-form
          :inline="true"
          :model="searchForm"
          class="form-inline"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input
              placeholder="请输入窍编号"
              v-model="searchForm.boxCode"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="searchForm.labelType"
              placeholder="标签类型"
              size="medium"
              clearable
            >
              <el-option
                v-for="item in labelTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searchForm.timeArray"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="medium"
              value-format="timestamp"
              :unlink-panels="true"
              :clearable="false"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="searchList"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
  
        <ExcelButton @outExcel="outExcel" :isExcelLoading='isExcelLoading' />
      </div>
      <div class="table-box">
        <ElTable refName="addressList" @pageChange="pageChange" :data-source="addressList" :data-config="tableConfig"
          :total="total" :pageSize="pageSize" :pageNum="pageNum" :isLoading="isLoading">
          <template #isDefault="{ scope }">
          <span class="color">{{
            scope.row.isDefault == 1
              ? "默认地址"
              : ""
          }}</span>
        </template>
          <template #operate="{ scope }">
            <el-button type="primary" size="mini" @click="editAddress(scope.row)">修改</el-button>
            <el-button size="mini" @click.native="deleteAddress(scope.row)">删除</el-button>
          </template>
        </ElTable>
      </div>
      <AddressEdit :isShowAddAddress="isShowAddAddress" :rowInfo="rowInfo" :title="title" @closeDialog="closeAddressDialog" />
    </div>
  </template>
  
  <script>
  import {
    getAddressList,
    deleteAddress
  } from "@/api/member/address";
  import ElTable from "@/components/table/ElTable.vue";
  import AddressEdit from "../access-manage/components/AddressEdit";
  export default {
    props: {},
    data() {
      return {
        searchForm: {
        boxCode: null,
        labelType: null,
        timeArray: [],
      },
        addressList: [],
        tableConfig: [
          {
            prop: "fullArea",
            label: "待入库",
          },
          {
            prop: "address",
            label: "详细地址",
          },
          {
            prop: "fullName",
            label: "联系人",
          },
          {
            prop: "mobile",
            label: "联系方式",
          },
          {
            prop: "isDefault",
            label: "",
            selectOption: [
              { label: "", value: "0" },
              { label: "默认地址", value: "1" },
            ],
          },
          {
            prop: "operate",
            label: "操作",
          },
        ],
        isLoading: false,
        total: 0,
        pageSize: 10,
        pageNum: 1,
        isShowAddAddress: false,
        title:"",
        rowInfo:{
          areaCode: [],
          areaId: "",
          address: "",
          fullName: "",
          mobile: "",
          isDefault: "0",
        },
        rules: []
      };
    },
    components: {
      ElTable,
      AddressEdit,
    },
    mounted() {
      this.getAddressList();
    },
    methods: {
      // 分页变化
      pageChange(emitData) {
        this.pageNum = emitData.pageNum;
        this.pageSize = emitData.pageSize;
        this.getAddressList();
      },
      // 地址列表
      getAddressList() {
        const params = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        };
        this.isLoading = true;
        getAddressList(params)
          .then((res) => {
            this.addressList = res.data;
            this.total = res.total;
            this.isLoading = false;
          })
          .catch((err) => {
            this.isLoading = false;
          });
      },
      // 删除地址
      deleteAddress(row) {
        this.$confirm("此操作将删除该地址, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteAddress(row.id).then((res) => {
              if (res.code === 200) {
                this.getAddressList();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      //修改地址
      editAddress(row) {
        this.title = '修改地址';
        this.rowInfo = row;
        this.isShowAddAddress = true;
      },    
      // 展开地址窗口
      showAddressDialog() {
        this.title = '添加地址';
        this.rowInfo = {};
        this.isShowAddAddress = true;
      },
      // 关闭地址窗口
      closeAddressDialog() {
        this.isShowAddAddress = false;
        this.getAddressList();
      },
    },
  };
  </script>
  
  <style scoped>
  .add-btn {
    margin-bottom: 10px;
  }
  span.color{
    color:#f88123;
  }
  </style>
  